<div class="card-container"
     [ngStyle]="{background:'url('+info?.cardImgUrl +') no-repeat center center/cover'}"
     *ngIf="info">
  <div class="card-switch seed-flexbox seed-flexbox-content-center" (click)="handleCardDisplay()">
    <seed-icon color="c10" name="icon-xiala2-01"></seed-icon>
  </div>
  <div class="small-card small-card-in seed-flexbox seed-flexbox-align-center seed-flexbox-content-between">
    <div class="left">
      <!--<img [src]="dataStore.theme.img" alt="">-->
      <seed-icon color="c10" name="icon-yinhangqia"></seed-icon>
      <p>
        <em *ngIf="info.usageCount||info.usageCount===0">{{info.usageCount
          }}{{info.usageUnit}}可用</em>
        <span class="order-link seed-flexbox seed-flexbox-align-center"
              [routerLink]="['/order/detail',info?.orderNumber]">查看订单</span>
      </p>
    </div>
    <div class="right seed-flexbox seed-flexbox-align-center seed-flexbox-content-center">
      <span>{{cardStatusStore[info?.state].state}}</span>
      <p [ngStyle]="{'background':cardStatusStore[info?.state].color}"></p>
    </div>
  </div>
  <div class="big-card big-card-out">
    <div class="big-card-content" [ngStyle]="{'background':dataStore.theme.background}">
      <i class="status-mark" [ngStyle]="{'background':cardStatusStore[info?.state].color}">
        {{cardStatusStore[info?.state].state}}
      </i>
      <div class="card-top text-ellipsis">卡号：{{info?.cardNo}}</div>
      <div class="card-content">
        <div class="left seed-flexbox seed-flexbox-content-between">
          <h2 class="text-ellipsis">{{info?.cardName }}</h2>
          <span *ngIf="info.usageCount||info.usageCount===0">{{info.usageCount}}</span>
        </div>
        <div class="right seed-flexbox seed-flexbox-align-center seed-flexbox-content-between">
          <p>有效期：{{info?.startTime|amDateFormat:'YYYY-MM-DD' }} 至
            {{info?.endTime|amDateFormat:'YYYY-MM-DD'}}</p>
          <p *ngIf="info.usageCount||info.usageCount===0">可用{{info.usageUnit}}数</p>
        </div>
      </div>
      <div class="card-bottom seed-flexbox seed-flexbox-align-center">
        <p class="order-link" [routerLink]="['/order/detail',info?.orderNumber]">查看订单</p>
        <p class="goods-link" [routerLink]="[info?.nextStepUrl]">查看商品</p>
      </div>
    </div>
  </div>
</div>
